<template>
  <div class="mine">
    <h3>饿了么</h3>
    <div class="user">
      <div class="img">
        <img src="../assets/touxiang.jpg" alt="" />
      </div>
      <div class="id">
        <p>点餐来饿了么</p>
        <p>{{ userphone }}</p>
      </div>
      <div class="shezhi">
        <span>账户设置</span>
      </div>
    </div>
    <div class="card">
      <p class="text">
        <span class="p1">吃货卡</span>
        <span class="p2">吃货豆:</span>
        <span class="num">1461</span>
      </p>
      <p class="p4">升级超级吃货卡，每月得无门槛红包，下单5倍反吃货豆</p>
    </div>
    <div class="tool">
      <p class="tit">常用工具</p>
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="toCollect(index)"
        >
          <van-icon :name="item.icon" size="24" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <div class="zujian">
      <div class="money">
        <h3>邀好友赚现金</h3>
        <p>最高得15元</p>
      </div>
      <div class="serve">
        <h3>饿了么服务号</h3>
        <p>关注后及时接收服务通知</p>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      userphone: JSON.parse(localStorage.getItem("userinfo")).phone,
      list: [
        { name: "我的地址", icon: "location-o" },
        { name: "我的咨询", icon: "phone-circle-o" },
        { name: "店铺关注", icon: "like-o" },
        { name: "评价有礼", icon: "star-o" },
      ],
    };
  },
  methods: {
    toCollect(index) {
      if (index == 2) {
        this.$router.push("/collect");
      } else if (index == 0) {
        this.$router.push("/address");
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.mine {
  height: 100%;
  background-color: #e1e1e1;
  padding: 6px 12px;
}
.user {
  width: 100%;
  height: 68px;
  margin-top: 18px;
}
.user .img {
  width: 68px;
  height: 68px;
  border-radius: 100%;
  float: left;
}
.user .img img {
  width: 68px;
  height: 68px;
  border-radius: 100%;
}
.id {
  padding: 0 10px;
  box-sizing: border-box;
  float: left;
}
.id p:nth-child(1) {
  font-weight: bold;
  padding: 10px 0;
}
.id p:nth-child(2) {
  font-size: 12px;
  color: #999;
}
.shezhi {
  float: right;
  margin-top: 18px;
}
.shezhi span {
  display: inline-block;
  border: 1px solid #000;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 14px;
}
.card {
  width: 100%;
  height: 80px;
  background: linear-gradient(to right, rgb(32, 127, 243), rgb(137, 179, 223));
  border-radius: 8px;
  margin: 14px auto 8px;
  text-align: center;
  box-sizing: border-box;
  color: white;
  overflow: hidden;
}
.card .text {
  text-align: left;
  margin-top: 10px;
}
.card .text .p1 {
  padding: 0 14px;
  font-size: 19px;
  display: inline-block;
  border-right: 1px solid #ccc;
}
.card .text .p2 {
  padding-left: 10px;
  font-size: 12px;
}
.card .text .num {
  font-size: 20px;
}
.p4 {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  color: #e1e1e1;
}
.tit {
  font-weight: bold;
}
.tool {
  background-color: #fff;
  border-radius: 8px;
  height: 105px;
  padding: 14px 10px;
  box-sizing: border-box;
}

ul {
  width: 100%;
  list-style: none;
  display: flex;
  margin-top: 16px;
}
ul li {
  width: 25%;
  display: flex;
  font-size: 13px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.zujian {
  width: 100%;
  height: 200px;
  display: flex;
  padding: 10px 0;
  box-sizing: border-box;
  justify-content: space-between;
}
.money,
.serve {
  width: 49%;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 16px 10px;
  box-sizing: border-box;
}
.zujian p {
  font-size: 12px;
  color: #999;
  padding: 6px 0;
}
</style>
